<template>
  <!-- 一单成生成结果页面 -->

  <view class="orderResult">
<child-header-bar :childTitle="childTitle" @getMarginTop="getMarginTop"></child-header-bar>
	<view class="head-info" :style="[{'top': top + 'px'}]">
		<image src='../../static/orderSucceed/top_bg.png' class="head-bg"></image>
		<view class="head-fa-list">
			<view class="head-item" @click="tabChange(item.slopeId)"
					:class="item.slopeId == tabIndex ? 'or-active' : ''" v-for="(item, index) in planList"
					:key="item.slopeId" v-if="index<3">
			<image :src="item.slopeId == tabIndex?'../../static/orderSucceed/bg_btn'+(index+1)+'_1.png':'../../static/orderSucceed/bg_btn'+(index+1)+'_2.png'"  class="head-fa"></image>
			<view class="head-title">{{item.slopeName}}</view>
			</view>		
		</view>
		
		<view class="item-list">
			<view class="item-cx">
				<view style="height: 80rpx;">
				<image src='../../static/orderSucceed/bg_title.png' style="width: 690rpx;height: 80rpx;"></image>
				<view class="item-title">出行方式——{{way == 1 ? "专线大巴/公交" : (way == 2 ? "租车/包车":"自驾")}}
				</view>
				</view>
				
				<view v-if="way == 1 " style="display: flex;align-items: center;font-size: 24rpx;width: 690rpx;border:1px solid #efefef;border-top:none;">
					<view >
						<rich-text class=""  v-if="shuttleBusInfo !== null" :nodes="shuttleBusInfo.replace(/\<img/gi, '<img style=\'max-width: 100%;height:auto;display:block;margin-bottom:10px\'')"></rich-text>	
								<view class="no-data-box" v-else>
									暂无路线信息 
								</view>
					</view>
				</view>
				
		<view v-else-if="way == 2" style="display: flex;align-items: center;font-size: 24rpx;width: 690rpx;border-top:none;flex-direction: column;">
			<view class="no-data-box" v-if="travalModalList == null || travalModalList.length == 0">
				暂无更多推荐
			</view>
				<view v-else class="hotel-item1" @click="toStoreIntro(item.bussinessId)" v-for="(item, index) in travalModalList.slice(0, 2)" :key="index">
					<view style="display: flex;">
						<view class="title">{{item.bussinessName}} </view>
						<view class="km">距离滑雪场{{item.distanceOf ? item.distanceOf : 0}}km</view>
					</view>
					<view>
						<view class="hi-grade" v-if="item.tag.length > 0">
							{{item.tag[0]}}
						</view>
						<view class="hi-label" v-if="item.childTag.length > 0">
							<view class="label-item" v-for="(item1, index1) in item.childTag" :key="index1">
								{{item1}}
							</view>
						</view>
					</view>
				</view>
		</view>		
				<view v-else style="display: flex;height: 80rpx;align-items: center;font-size: 24rpx;width: 690rpx;border:1px solid #efefef;border-top:none;">
					<view style="margin-left: 50rpx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 500rpx;">{{city ? city : '-'}}|{{address ? address : '-'}}</view>
					<view style="position: absolute;right: 30rpx;" @click="toPosition()">
						<image src="../../static/orderSucceed/icon_dh.png" style="width: 101rpx;height: 34rpx"></image>
					</view>
				</view>			
			</view>
			<view class="item-hotel">
				<view style="height: 80rpx;">
				<image src='../../static/orderSucceed/bg_title.png' style="width: 690rpx;height: 80rpx;"></image>
				<view class="item-title">根据目的地，推荐以下酒店{{hotelList.slice(0, 2).length}}
				</view>
				<view class="item-hotel1" v-if="hotelList.length > 0" @click="toOrderTypeList('hotel')"
				
				>
					<image src='../../static/orderSucceed/btn_ljgd.png' style="width: 136rpx;height: 32rpx"></image>
				</view>
				</view>
				<view class="no-data-box" v-if="hotelList.length == 0">
					暂无更多推荐
				</view>
				<view v-else class="hotel-item" @click="toStoreIntro(item.bussinessId)" v-for="(item, index) in hotelList.slice(0, 2)" :key="index"
					:style="hotelList.slice(0, 2).length-1==index?'border-bottom-left-radius:20rpx;border-bottom-right-radius:20rpx;':''"
				>
					<view style="display: flex;width: 100%;margin:30rpx 0 0 20rpx;">
						<view class="title">{{item.bussinessName}} </view>
						<view class="km">距离滑雪场{{item.distanceOf ? item.distanceOf : 0}}km</view>
					</view>

					<view style="width: 690rpx;display: flex;">
						<view class="hi-grade" v-if="item.tag.length > 0 &&item.tag[0]!='' ">
							#{{item.tag[0]}}
						</view>

						<view class="hi-grade" 	v-if="item.childTag.length > 0" v-for="(item1, index1) in item.childTag" :key="index1">

								#{{item1}}
	
						</view>
					</view>
				</view>

			</view>
			<view class="item-food">
				<view style="height: 80rpx;">
				<image src='../../static/orderSucceed/bg_title.png' style="width: 690rpx;height: 80rpx;"></image>
				<view class="item-title">根据目的地，推荐以下美食
				</view>
				<view style="position:absolute;top:0;display:flex;align-items:center;height:80rpx;right:20rpx;" v-if="foodList.length > 0" @click="toOrderTypeList('food')">
					<image src='../../static/orderSucceed/btn_ljgd.png' style="width: 136rpx;height: 32rpx"></image>
				</view>
				</view>
				<view class="no-data-box" v-if="foodList.length == 0">
					暂无更多推荐
				</view>
				<view v-else class="hotel-item" @click="toStoreIntro(item.bussinessId)" v-for="(item, index) in foodList.slice(0, 2)" :key="index"
				:style="foodList.slice(0, 2).length-1==index?'border-bottom-left-radius:20rpx;border-bottom-right-radius:20rpx;':''">
					<view style="display: flex;">
						<view class="title">{{item.bussinessName}} </view>
						<view class="km">距离滑雪场{{item.distanceOf ? item.distanceOf : 0}}km</view>
					</view>
									
							
							<view>
								<view class="hi-grade" v-if="item.tag.length > 0">
									{{item.tag[0]}}
								</view>
								<view class="hi-label" v-if="item.childTag.length > 0">
									<view class="label-item" v-for="(item1, index1) in item.childTag" :key="index1">
										{{item1}}
									</view>
								</view>
							</view>
				</view>
			</view>
			<view class="or-top-btns">
			<image src="https://huaxue.cailianxinwen.com/static/save.png" @click="saveItinerary" mode="" style="margin-left: 21rpx;"></image>
			
			<image src="https://huaxue.cailianxinwen.com/static/share.png" @click="MyItinerary"></image>	
			</view>
		</view>
	</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        params: {}, //传过来的数据
        orderCity: '',
		 imgurl:'',
		  canvasShow:true,
        way: 2,
		isHidden:false,
        isFold: false,
        tabIndex: -1,
        top: 0, //距离顶部距离
        slotShow: true, //显示景点，但是用户选择一天，当前模块不展示，默认展示true
        childTitle: '一单成', //标题
        planList: [], //方案列表
        shuttleBusInfo: '', //大巴线路富文本
        travalModalList: [], //租车包车列表
        // ticketPrice: '', //门票信息富文本
        ticketsList: [], //门票列表
        hotelList: [], //酒店列表
        foodList: [], //美食列表
        spotsViewList: [], //景点截断
        // 景点
        spotsList: [], //景点完整数据
        city: '',
        address: '',
        positionX: '',
		        positionY: '',
				slopeName:''
      }
    },
    watch: {
      // 判断数据是否为折叠状态
      isFold(item1, item2) {
        // item1为新值，item2为旧值
        // 如果isFold是true，为折叠状态，数据取前两条
        if (item1) {
          this.spotsViewList = this.spotsList
        } else {
          this.spotsViewList = this.spotsList.slice(0, 2)
        }
      }
    },
	/*
    onShareAppMessage() {
      let skiNameParam = this.planList.find(item => item.slopeId == this.tabIndex)
      console.log(skiNameParam)
      return {
        title: skiNameParam.slopeName,

      }
    },
	*/
    onShareTimeline() {
      let skiNameParam = this.planList.find(item => item.slopeId == this.tabIndex)
      //console.log(skiNameParam)
      return {
        title: skiNameParam.slopeName
      }
    },
    onShow() {
      this.spotsViewList = this.spotsList.slice(0, 2);
    },
    onLoad(options) {
	
	
      console.log(options.params)
	
      if (options.params) {
        this.params = JSON.parse(options.params)
       // console.log(this.params.questionOne)
        this.orderCity = this.params.questionOne;


        this.getData()
      }
    },
    methods: {
		canvasImage(){
		                uni.showLoading({
		                    title:'加载中',
		                    mask:true
		                })
					
		                
		            },
		            saveImage(){
		                uni.showActionSheet({
		                    itemList: ['保存图片','取消'], 
		                    success: (res) => {
		                        if(res.tapIndex == 0){
		                            uni.saveImageToPhotosAlbum({
		                                filePath: this.imgurl,//    图片文件路径，可以是临时文件路径也可以是永久文件路径，不支持网络图片路径
		                                success: () => {
		                                    uni.showToast({
		                                        title: '保存成功',
		                                        duration: 2000
		                                    });
		                                },
		                                fail: () => {
		                                    uni.showToast({
		                                        title: '保存失败',
		                                        duration: 2000 
		                                    });
		                                }
		                            });
		                        }
		                    },
		                    fail: function (res) {
		                        console.log(res.errMsg);
		                    }
		                });
		            },
      // 点击切换tab
      tabChange(index) {
     //   console.log('切换点击' + this.tabIndex)
        this.params.slopeId = index
        this.tabIndex = index
      //  console.log(this.params)
        this.getData()
      },
	  MyItinerary(){
   uni.navigateTo({
          url: '/myPackageA/pages/trip/index',
        })
	  },
      // 保存当前行程
      saveItinerary() {
        let _this = this
        let saveParam = _this.params
        if (_this.tabIndex == -1) {
          uni.showToast({
            title: '暂无可以保存的行程',
            duration: 2000,
            icon: 'none'
          })
          return
        }
        if (!_this.params.slopeId) {
          saveParam.slopeId = _this.tabIndex
        }
        let mobilePhone = uni.getStorageSync('phonenumber')
        saveParam.mobile = mobilePhone;
      //  console.log(saveParam)
	
        uni.request({
          url: _this.$httpApi.install.saveOrderSuccess,
          method: 'POST',
          data: _this.params,
          success(res) {
            if (res.data.code == 200) {
              uni.showToast({
                title: '已保存当前行程',
                icon: 'success'
              })
            } else {
         //     console.log(res.msg)
            }
          },
          fail(error) {

          },
        })
        console.log(saveParam)
      },
      // 获取到用户选择的出行方式
      getWay() {
        let _this = this
        if (_this.params.questionSix == '滑雪场专线公交车') {
          _this.way = 1
        } else if (_this.params.questionSix == '租车自驾' || _this.params.questionSix == '包车接送') {
          _this.way = 2
        } else if (_this.params.questionSix == '私家车自驾') {
          _this.way = 3
        }
		        console.log(_this.params)
	////	console.log('=============aa==========')
     //   console.log(_this.way)
      },
      getAddress(list) {

        let list1 = list.find(item => item.slopeId == this.tabIndex)
        this.city = list1.city
        this.address = list1.address
		this.slopeName=list1.slopeName
        this.positionX = list1.positionX
		this.positionY = list1.positionY
      },
	
	  close(){
		  	  this.isHidden=false
	  },
      // 获取酒店标签
      getTag(list) {
   //     console.log('list-----', list)
        if (list && list.length > 0) {
          list.forEach(item => {
           // console.log(item)
            if (item.tag !== null) {
          //    console.log('标签来了' + item.tag)
              item.tag = item.tag.split(',')
              item.childTag = item.tag.slice(1)
            } else {
              item.tag = []
              item.childTag = []
            }
          })
        }
      },
	  saveImg(){
		          let _this = this;
			_this.isHidden=true
		  	_this.canvasImage()
	  },      // 获取数据
      getData() {
        let _this = this;
        _this.shuttleBusInfo = ''
        // _this.ticketPrice = ''
        _this.hotelList = []
        _this.foodList = []
        _this.spotsList = []
        _this.spotsViewList = []
        _this.travalModalList = []

        uni.request({
          url: _this.$httpApi.install.orderSuccess,
          method: 'POST',
          data: _this.params,
          success(res) {
		
			//  console.log(res)
            if (res.data.code == 200) {
              // 等于-1时代表初次进入页面，默认展示第一条数据
              if (_this.tabIndex == -1) {
                _this.tabIndex = res.data.data.skiSlopeList[0].slopeId
                _this.planList = res.data.data.skiSlopeList
                _this.getWay()
				
				_this.slopeName=res.data.data.skiSlopeList[0].slopeName
				_this.address=res.data.data.skiSlopeList[0].address
				//console.log(_this.slopeName,_this.address)
              }
              _this.shuttleBusInfo =res.data.data.shuttleBusInfo //出行路线-大巴
              if (_this.way == 2) {
                _this.travalModalList = res.data.data.travelModalList //获取租车信息
                _this.getTag(res.data.data.travelModalList) //获取酒店tag的信息
              }
              if (_this.way == 3) {
                // 如果是自驾，获取当前信息的地址
                _this.getAddress(res.data.data.skiSlopeList)

              }
              _this.hotelList = res.data.data.bussinessStayList //获取酒店信息
              _this.getTag(res.data.data.bussinessStayList) //获取酒店tag的信息
              _this.foodList = res.data.data.bussinessFoodList //获取餐饮信息
              _this.getTag(res.data.data.bussinessFoodList) //获取餐饮tag信息
              _this.spotsList = res.data.data.attractionsList //获取景点信息
              if (_this.spotsList.length > 1) {
                _this.spotsViewList = _this.spotsList.slice(0, 1) //展示前一条景点信息
              } else {
                _this.spotsViewList = _this.spotsList
              }
            } else {

              console.log(res)
              uni.showToast({
                title: '暂无行程推荐',
                icon: 'none',
                duration: 2000
              })
            }
          },
          fail(error) {

          },
        })
      },
      // 跳转到一门清酒店列表
      toOrderTypeList(type) {
        let param = JSON.stringify(this.params)
        uni.navigateTo({
          url: '/myPackageB/pages/orderTypeList/orderTypeList?type=' + type + '&param=' + param
        })
      },
	  
      // 富文本添加列表边框样式
      replaceContent(content) {
        // console.log(content)
        if (content) {
          content = content.replace(/\<img/gi, '<img class="imgColor" ') //正则替换
          return content;
        } else {
          return null;
        }
      },
      // 导航点击
      toPosition(val) {
console.log(val)
        if (!this.positionX || !this.positionY) {
          uni.showToast({
            title: '暂无导航数据',
          })
          return
        }
       // let pos = this.slopeIntro.position.split(',')
        let lat = this.positionY
        let lng = this.positionX
        //打开地图，并将门店位置传入
        uni.getLocation({
			 type: 'gcj02',
          success: (res) => {
		console.log('location success', Number(parseFloat(lat)), parseFloat(lng))
		console.log(this.slopeName,this.address)
            uni.openLocation({
              latitude: parseFloat(lat),
              longitude: parseFloat(lng),
			  name:this.slopeName,
			  address:this.address,
              scale: 17,
            })
          },
		  fail(e){
			  console.log(e)
		  },
        })
      },
      // 跳转到商家介绍
      toStoreIntro(id) {
        uni.navigateTo({
          url: '/myPackageA/pages/storeIntro/storeIntro?businessId=' + id
        })
      },
      // 动态接收导航栏高度
      getMarginTop(marginTop) {
        this.top = marginTop ? marginTop : 150
      },
    }
  }
</script>
<style>

  page {
    width: 100%;
    height: 100%;
    background-color: #F8FAFE;
	font-family:"微软雅黑";
  }

</style>
<style lang="scss" scoped>
.head-info{
	position: absolute;
	.head-bg{
		width: 750rpx;
		height: 631rpx;
	}
	.head-fa-list{
		position: absolute;
		top:265rpx;
		.head-item{
			display: flex;
			align-items: center;
			.head-fa{
				width: 699rpx;
				height: 92rpx;
				margin: 10rpx 30rpx;
			}	
			.head-title{
				position: absolute;
				    left: 245rpx;
				    width: 413rpx;
					font: 34rpx ;
					font-family: Microsoft YaHei;
					    font-weight: bold;
			}
		}
	
	}

}
.item-list{
	position: absolute;
	display: flex;
	flex-direction: column;
	
	.or-top-btns {
		display: flex;
	
		margin-top: 40rpx;
		margin-bottom: 50rpx;
		image {
			width: 340rpx;
			height: 124rpx;
			border-radius: 40rpx;
			margin-right: 21rpx;
		}
	}
	.item-cx{
		height: 80rpx;
		    display: flex;
		    align-items: center;
			margin: 0 30rpx;
		    flex-direction: column;
			height: 100%;
			position: relative;
		.item-title{
			    position: absolute;
			    left: 50rpx;
			    top: 0;
			    height: 80rpx;
			    display: flex;
			    align-items: center;
			}
			.imgColor {
				max-width: 100%;
				height: auto;
			}
			[alt] {
				max-width: 100%;
			}
		}
	.item-hotel{
	height: 80rpx;
	    display: flex;
	    align-items: center;
		margin: 0 30rpx;
		margin-top:20rpx;
	    flex-direction: column;
		height: 100%;
		position: relative;
	.item-title{
		    position: absolute;
		    left: 50rpx;
		    top: 0;
		    height: 80rpx;
		    display: flex;
		    align-items: center;
		}
		.item-hotel1{
			position:absolute;top:0;display:flex;align-items:center;height:80rpx;right:20rpx;
		}
		.hotel-item{
			display: flex;
			align-items: center;
			font-size: 24rpx;
			width: 690rpx;
			border:1px solid #efefef;
			border-top:none;

			.title{
				font-size: 30rpx;
				font-weight: bold;
				margin-left: 30rpx;
				font-family:"微软雅黑";
			}
			.km{
				border: 1px solid #f0f1f5;
				border-radius: 18rpx;
				height: 36rpx;
				color: #5d87ed;
				font-size: 20rpx;
				background-color: #f0f1f5;
				padding: 0 15rpx;
				position: absolute;
				 right: 10rpx;
				 
			}
		}
	}
	.item-food{
	height: 80rpx;
	    display: flex;
	    align-items: center;
		margin: 0 30rpx;
		margin-top:20rpx;
	    flex-direction: column;
		height: 100%;
		position: relative;
	.item-title{
		    position: absolute;
		    left: 50rpx;
		    top: 0;
		    height: 80rpx;
		    display: flex;
		    align-items: center;
		}
		.hotel-item{
			display: flex;height: 80rpx;align-items: center;font-size: 24rpx;width: 690rpx;border:1px solid #efefef;border-top:none;
			.title{
				font-size: 30rpx;
				font-weight: bold;
				margin-left: 50rpx;
				font-family:"微软雅黑";
			}
			.km{
				border: 1px solid #f0f1f5;
				border-radius: 18rpx;
				height: 36rpx;
				color: #5d87ed;
				font-size: 20rpx;
				background-color: #f0f1f5;
				padding: 0 15rpx;
				position: absolute;
				 right: 10rpx;
				 
			}
		}
	}
	
}
	.imgColor {
		max-width: 100%;
		height: auto;
	}
.hi-grade{
	padding:2rpx 20rpx;
	border-radius: 18rpx;
	background-color: #f0f1f5;
	color:#91A4B2;
	margin: 20rpx 10rpx 30rpx 20rpx;
}
		.hotel-item1{
			display: flex;
			align-items: center;
			font-size: 24rpx;
			width: 690rpx;
			border:1px solid #efefef;
			border-top:none;
height: 80rpx;
			.title{
				font-size: 30rpx;
				font-weight: bold;
				margin-left: 20rpx;
				font-family:"微软雅黑";
			}
			.km{
				border: 1px solid #f0f1f5;
				border-radius: 18rpx;
				height: 36rpx;
				color: #5d87ed;
				font-size: 20rpx;
				background-color: #f0f1f5;
				padding: 0 15rpx;
				position: absolute;
				 right: 10rpx;
				 
			}
		}
		.no-data-box {
			padding: 10rpx 20rpx;
			font-size: 24rpx;
			color: gray;
		}
	[alt] {
		max-width: 100%;
	}
</style>